@<template>
  <div class="box">
      <!-- 头部导航 -->
      <div class="top flex">
          <div>{{name}}</div>
          <div v-if="name!='个性电台推荐'">更多</div>
      </div>
      <!-- list -->
      <div class="list flex">
          <div class="list-item" v-for="(item,index) in fatherData" :key="index">
              <div class="item-img">
                  <img :src="item.picUrl" alt="">
                  <div class="text text-one">{{item.name}}</div>
              </div>
              <div class="color text-one">{{item.rcmdtext}}</div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'ZhuboCard',
    props:{
        name:{
            type:String,
        },
        fatherData:{
            type:Array
        }
    }
}
</script>

<style scoped lang='less'>
     .box{
         height: 260px;
         width: 100%;
         .top{
             border-bottom: 2px solid skyblue;
             padding-bottom: 6px;
         }
         .list{
             .list-item{
                width: 168px;
                height: 199px;
                cursor: pointer;
                // border: 1px solid red;
                margin-top: 10px;
                .item-img{
                    position: relative;
                    font-size: 14px;
                    img{
                        width: 100%;
                        height: 168px;
                    }
                    .text{
                        position: absolute;
                        width: 100%;
                        height: 20px;
                        bottom:4px;
                        color: #fff;
                        font-weight: 500;
                        background: rgba(1, 1, 1, .4);
                    }
                }
                .color{
                    color: rgb(31, 5, 146);
                }
             }
         }
     }

</style>